"use client";

import { ReactNode, useEffect } from "react";
// import { ThemeProvider, type DefaultTheme } from "styled-components";
import { type DefaultTheme } from "styled-components";
import GlobalStyle from "@/components/globalstyles";
import ThemeProvider from "@/styled/ThemeProvide";
import { GlobalStateProvider } from "./context";
import { Theme, ThemePanel } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";

const theme: DefaultTheme = {
    colors: {
        primary: "#111",
        secondary: "#0070f3",
    },
};

export default function ClientLayout({ children }: { children: ReactNode }) {
    return (
        // <ThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>
            <Theme
                accentColor='blue'
                grayColor='sand'
                radius='small'
                scaling='100%'>
                <GlobalStateProvider>
                    <GlobalStyle />
                    {children}
                </GlobalStateProvider>
                <ThemePanel defaultOpen={false} />
            </Theme>
        </ThemeProvider>
        // </ThemeProvider>
    );
}
